<template>
   <div class="city">
       <div class="title">
           <div><i class="iconfont icon-cha" @click="goback"></i></div>
           <span>当前城市</span>
        </div>
        <div class="searchbox">
            <div>

                <div><i class="iconfont icon-chazhao"></i></div>
                <input v-model="keyword" type="text" ref="input" placeholder="请输入城市或拼音首字母">
            </div>
            <button @click="cancel">取消</button>
        </div>
        <div class="citypos">
            <div >Gps定位你所在的城市</div>
            <button ref="info">chengdu</button>
        </div>
        
        <div class="hotcity">
            <div>热门城市</div>
            <div>
                <button>北京</button>
                <button>上海</button>
                <button>广州</button>
                <button>深圳</button>
            </div>
        </div>

        <div class="all-list" v-for="(item,index) in list" :key="item.name" v-show="!keyword">
            <h3 v-show="index===0 || index!==0 && item.letter !==list[index-1].letter">{{item.letter}}</h3>
            <ul  >
                <li @click="savecookie(item.cityId,item.name)">
                    <!-- @click="goto(item.cityId)" -->
                    <span>{{item.name}}</span>
                </li>
            </ul>
        </div>
        <ul v-show="keyword" class="new-list">
            <li v-for="(newitem,index) in newlist" :key="index">
                {{newitem.name}}
            </li>
        </ul>
        <ul v-show="!keyword">
            <li v-for="(item,index) in list" :key="item.name">
                <h3 v-if="index===0 || index!==0 && item.letter !==list[index-1].letter">{{item.letter}}</h3>
                <span>{{item.name}}</span>
            </li>
        </ul>
        <!-- <ul v-show="keyword">
            <li v-for="(newitem,index) in newlist" :key="index">{{newitem}}</li>
        </ul> -->

   </div>
</template>

<script>
import {getCityList} from '@/api'
import {location} from '@/module/getLocation.js'
export default {
    data(){
        return {
            list:[],
            keyword:'',
            newlist:[],
            timer:null
        }
    },
    watch:{
        keyword(){
            if(this.timer) {
                clearTimeout(this.timer)
            }
            if(!this.keyword){
                this.newlist=[]
                return
            }
            this.timer = setTimeout(()=>{
                const result =[]
                console.log(this.list)
                for(let i in this.list){
                    var obj = this.list[i]
                    console.log(obj.spell)
                    //  for(let key in obj){
                    //      console.log(obj.spell)
                         if (obj.spell.indexOf(this.keyword) >-1 ||
                            obj.name.indexOf(this.keyword) >-1 ){
                            result.push(obj)
                        }
                    //  }
                console.log(result)
                // this.newlist = result
            }
            this.newlist = result
            console.log(this.newlist)
            },100)
            
        }
    },
    created(){
         getCityList().then((res)=>{
             console.log(res)
              this.list = res.data.data.cities.sort((a,b)=>a.pinyin.localeCompare(b.pinyin)).map((item)=>{
                  return {
                      "letter":item.pinyin[0].toUpperCase(),
                      "name":item.name,
                      "spell":item.pinyin,
                      "cityId":item.cityId,
                      "spell":item.pinyin
                  }
              })
              console.log(this.list)
         })
         this.$nextTick(()=>{
             this.$refs.input.focus()
         })

         location((city)=>{
           this.$refs.info.innerHTML=city
         })
    },
    methods:{
        cancel(){
        //     this.$nextTick(()=>{
        //      this.$refs.input.blur()
        //  })
        this.keyword=''
        },
        goback(){
            this.$router.go(-1)
        },
        savecookie(cid,cname){
            this.$cookie.setCookie('cityID',cid)
            this.$cookie.setCookie('cityNAME',cname)
            this.$router.go(-1)
        },
    }
}
</script>

<style>
.city .title{
    height:1rem;
    font-size:0.4rem;
    text-align: center;
}
.city .title div{
    float:left;
}
.city .searchbox{
    width:100%;
    height:1rem;
    background: lightgray;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.city .searchbox div{
    width:70%;
    height:80%;
    background:white;
    border-radius:0.5rem;
}
.city .searchbox div input{
    height:95%;
    border:none;
    outline: none;
    line-height: 0.64rem;
}
.city .searchbox div div{
    width:0.8rem;
    height:0.8rem;
    float:left;
    text-align: center;
    line-height: 0.8rem;
}
.city .citypos{
    width:100%;
    height:2rem;
    padding:0.5rem;
    box-sizing: border-box;
}
.city .citypos button{
    margin-top:0.2rem;
}
/* .city .all-list{
    margin-top:0.01rem;
} */
.city .all-list h3{
    background:lightgray;
    height:0.2rem;
    margin: 0;
    font-size:0.1rem;
    line-height: 0.2rem;
    padding-left:0.2rem;
    box-sizing: border-box;
}
.city .all-list ul li{
    height:0.5rem;
    border-bottom: 0.01rem solid rgb(207, 207, 207);
    line-height: 0.5rem;
     padding-left:0.4rem;
    box-sizing: border-box;
}
</style>